
<template>
<!-- 写手端 菜单栏 -->
  <div class="meunBar">

      <!-- <div class="title">
        <img src="@/assets/img/assessor/logo.png" alt="">
      </div> -->
      


      <div class="arr">
        <div class="arrItem" v-for="(item,index) in state.meunBarArr" :key="index">
            <div :class="state.activeIndex==index ? 'activeItem' : 'item'"  @click="goPage(item,index)" >
                <div class="icon">
                    <img v-if="item.icon" :src="state.activeIndex==index ? item.activeIcon : item.icon" alt="">
                    <!-- <i class="el-icon-document iconImg" v-if="!item.icon"></i> -->
                </div>
                <div class="text">{{item.title}}</div>
                <i style="margin-left:0.2em;" v-if="item.children" :class="item.showMore ? 'el-icon-arrow-up':'el-icon-arrow-down' "></i>
            </div>
            <div v-if="item.children && item.showMore"  class="childrenArr">
                <div :class="state.activeChildrenIndex==index2 ? 'activeChildrenItem' : 'childrenItem'  " v-for="(item2,index2) in item.children" :key="index2" @click="goChildrenPage(item2,index2,index)">
                    {{item2.meta.title}}
                </div>
            </div>
        </div>
      </div>

  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const state = reactive({
      meunBarArr : [],
      activeIndex: -1,
      activeChildrenIndex : -1,
  });
export default {
  name: 'menuBar',
  components: {},
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      function getMenuBar(){
          state.meunBarArr = []
          let routerArr = router.options.routes[2].children
          routerArr.forEach((item)=>{
           if (localStorage.role==1) {
                if (item.meta.role==1 && item.meta.isMenu && item.children) {
                    item.children.forEach((item2)=>{
                       let itemObj ={
                          title : item2.meta.title,
                          icon : item2.meta.icon,
                          activeIcon : item2.meta.activeIcon,
                          name : item2.name,
                          children : item2.children,
                          showMore : false,
                      }
                      state.meunBarArr.push(itemObj)

                    })
               
              }
            }

         
          })
          // console.log(111);
          // console.log(state.meunBarArr);
          // console.log(state.meunBarArr[0].children);

            let title = router.currentRoute._value.meta.title
             state.meunBarArr.forEach((item,index)=>{
               if(item.title==title){
                 state.activeIndex = index
               }
             })

          // console.log(state.meunBarArr);
      }
      function goPage(_item,_index){
        state.activeIndex = _index
        if (_item.children) {
            _item.showMore =  !_item.showMore
            return
        }
        state.activeChildrenIndex = -1
        router.push({name:`${_item.name}`})
      };
      function goChildrenPage(_item,_index,_parentIndex){
        state.activeChildrenIndex = _index
        state.activeIndex = _parentIndex
        router.push({name:`${_item.name}`})
      };
      onMounted(getMenuBar);
      return{
        state,
        getMenuBar,
        goPage,goChildrenPage,
      }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  }
}
</script>
<style lang="scss" scoped>

@media screen and (max-width: 1000px){
  .meunBar{
    width: 0 !important;
    display: none;
    transition: all 0.8s;
    .activeItem,.item{
      opacity: 0;
    }

  }
  
}

.meunBar{
  width: 15.9375rem;
  height: 100%;
  transition: all 0.8s;
  // display: block;
  overflow-y: auto;
  // background: linear-gradient(1deg, #83A6FE,#3676FF);
  background: #29304E;
    .title {
      height: 89px;
      display: grid;
      place-items: center;
      img {
        width: 75%;
      }
    }

    .arr {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
        .arrItem {
          display: flex;
          flex-direction: column;
          // align-items: center;
          justify-content: center;
          font-size: 1.125rem;
          width: 100%;
          color: #fff;
          cursor: pointer;
          letter-spacing:2px;
          position: relative;
              .activeItem{
                background: #f5f7fc;
                width: 100%;
                height: 3.75rem;
                color: #292D44;
                font-size: 1.125rem;
                display: flex;
                align-items: center;
                padding-left: 20%;
                // justify-content: center;
              }
           .item{
             padding-left: 20%;
             display: flex;
             align-items: center;
             height: 3.75rem;
             font-size: 1.125rem;

           }


          .icon {
            display: flex;
            align-items: center;
           
            img{
                // position: relative;
                // left: -40%;
                width: 2rem;
                height: 2rem;
            }
          }

          .text {

          }
          .childrenArr{
            width: 100%;
            .childrenItem{
              height: 2.5rem;
              display: grid;
              place-items: center;
              font-size: 1rem;
            }
            .activeChildrenItem{
              height: 2.5rem;
              display: grid;
              place-items: center;
              border-top: 2px solid #292D44;
              border-left: 2px solid #292D44;
              font-size: 1rem;
              background: #F5F7FC;
              color: #292D44;
            }
          }
        }

    }

}
</style>
